'use strict';

const xhr = new XMLHttpRequest();
let lifeWrap = document.querySelector('.life_wrap');

//分页按钮
class PagesChange {
    constructor() {
        this.previousBtns = document.querySelectorAll('.previous');
        this.nextBtns = document.querySelectorAll('.next');
        this.whichPage = document.querySelectorAll('.which_page');
        this.pages = document.querySelectorAll('.pages');
    }

    pageChange(start, end) {
        lifeWrap.innerHTML = '';
        xhr.open('get', `/upload/articles/pages?start=${start}&end=${end}`, true);
        xhr.send();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if (xhr.responseText === 'no') {
                    alert('加载失败！');
                    return;
                }
                let obj = JSON.parse(xhr.responseText);
                for (let i = start - start; i < obj.arr.length; i++) {
                    if (obj.arr[i]) {
                        lifeWrap.innerHTML += `<article data-index="${i + start}">
                        <div>
                            <img type="image/jpeg" src="${obj.arr[i].imgUrlBase64}" alt="">
                        </div>
                        <p class="text">${obj.arr[i].context}</p>
                        <p class="date">${obj.arr[i].update}</p>
                       </article>`;
                    }
                }
                this.pages[0].innerHTML = `共${obj.pages}页`;
                this.pages[1].innerHTML = `共${obj.pages}页`;
                this.pages[0].setAttribute('data-p', obj.pages);
            }
        }
    }

    next() {
        for (let i = 0; i < 2; i++) {
            this.nextBtns[i].onclick = () => {
                let start = parseInt(lifeWrap.lastElementChild.getAttribute('data-index')) + 1;
                let end = start + 6;
                if (start % 6 === 0 && parseInt(this.pages[0].getAttribute('data-p')) > 1) {
                    this.whichPage[0].innerHTML = `第${start / 6 + 1}页`;
                    this.whichPage[1].innerHTML = `第${start / 6 + 1}页`;
                    this.pageChange(start, end);
                }
            }
        }
    }

    previous() {
        for (let i = 0; i < 2; i++) {
            this.previousBtns[i].onclick = () => {
                let end = parseInt(lifeWrap.firstElementChild.getAttribute('data-index'));
                let start = end - 6;
                if (start >= 0) {
                    this.whichPage[0].innerHTML = `第${start / 6 + 1}页`;
                    this.whichPage[1].innerHTML = `第${start / 6 + 1}页`;
                    this.pageChange(start, end);
                }
            }
        }
    }
}

//分类栏变色
class clLiChang {
    constructor() {
        this.getEle();
        this.liChang();
    }

    getEle() {
        this.claWrap = document.querySelector('.classification_wrap');
        this.claLis = this.claWrap.querySelectorAll('li');
    }

    liChang() {
        for (let i = 0; i < this.claLis.length - 2; i++) {
            this.claLis[i].addEventListener('click', () => {
                for (let n = 0; n < this.claLis.length - 2; n++) {
                    this.claLis[n].className = '';
                }
                this.claLis[i].className = 'li_change';
            })
        }
    }
}

//返回顶部按钮
class topMov {
    constructor() {
        this.getEle();
        this.topBlock();
        this.top(true);
    }

    getEle() {
        this.topBox = document.querySelector('.top_box');
    }

    topBlock() {
        window.addEventListener('scroll', () => {
            if (window.scrollY >= 100) {
                this.topBox.style.display = 'block';
                this.topBox.style.top = window.scrollY + window.innerHeight / 1.8 + 'px';
            }
            if (window.scrollY < 100) {
                this.topBox.style.display = 'none';
                this.topBox.style.top = 0 + 'px';
            }
        })
    }

    top(flag) {
        this.topBox.addEventListener('click', () => {
            if (flag) {
                let step = window.scrollY;
                let topBoxMov = () => {
                    if (step > 0) {
                        step -= 55;
                        window.scroll(0, step);
                        window.requestAnimationFrame(topBoxMov);
                    } else {
                        return;
                    }
                }
                window.requestAnimationFrame(topBoxMov);
            } else {
                window.scroll(0, 0);
            }
        })
    }
}

new topMov();
new clLiChang();
let pc = new PagesChange();

window.addEventListener('load', () => {
    pc.pageChange(0, 6);
    pc.next();
    pc.previous();
})
